<template>
  <div class="box" v-if="sxy">
    <div
      class="box-bg"
      :style="'background:url(' + list[i].pic + ') no-repeat center'"
    ></div>
    <div class="box-mask"></div>
    <div class="box-top">
      <h3 style="width: 70%; margin: auto" class="van-ellipsis">
        {{ list[i].txt }}
      </h3>
      <p class="sname">{{ list[i].name }}</p>
    </div>
    <div class="spic" :class="flag ? 'active' : 'paused'" ref="spic">
      <img :src="list[i].pic" alt="" />
    </div>
    <div class="jdt">
      <span>{{ currentTime }}</span>
      <van-slider
        button-size="14px"
        class="tiao"
        v-model="progress"
        :min="0"
        :max="100"
        @change="tuoDong"
      />
      <span>{{ duration }}</span>
    </div>
    <div class="box-btm" style="color: #fff">
      <van-icon size="24" name="exchange" />
      <van-icon size="24" @click.stop="prevSong" name="arrow-left" />
      <p>
        <van-icon
          @click.stop="playAll"
          size="48"
          v-if="lxx"
          name="play-circle-o"
        />
        <van-icon
          @click.stop="pause"
          size="48"
          v-if="flag"
          name="pause-circle-o"
        />
      </p>
      <van-icon @click.stop="nextSong" size="24" name="arrow" />
      <p>
        <van-icon @click.stop="showList = true" size="24" name="orders-o" />
      </p>
    </div>
    <van-popup
      v-model="showList"
      round
      position="bottom"
      :style="{ height: '60%', width: '92%', marginLeft: '4%', color: '#666' }"
    >
      <myPlay
        :list="list"
        :changeSong="changeSong"
        :current="current"
        :deleteAll="deleteAll"
        :changeI="changeI"
        :delOne="delOne"
        :play="play"
      ></myPlay>
    </van-popup>
  </div>
</template>


<script>
import { mapState,mapMutations } from "vuex";

export default {
  props: [
    "flag",
    "lxx",
    "changeSong",
    "deleteAll",
    "changeI",
    "delOne",
    "play",
    "nextSong",
    "changePlay",
    "pause",
    "prevSong",
    "duration",
    "tuoDong",
    "currentTime",
    "playAll",
  ],
  data() {
    return {
    };
  },
  computed:{
    ...mapState(['sxy']),
    progress:{
        get(){
            return this.$store.state.progress;
        },
        set(v){
            this.$store.commit('setProgress',v)
        }
    },
    showList:{
        get(){
            return this.$store.state.showList;
        },
        set(v){
            this.$store.commit('setShowList',v)
        }
    },
    i:{
        get(){
            return this.$store.state.i;
        },
        set(v){
            this.$store.commit('setI',v)
        }
    },
    current:{
        get(){
            return this.$store.state.current;
        },
        set(v){
            this.$store.commit('setCurrent',v)
        }
    },
    list:{
        get(){
            return this.$store.state.list;
        },
        set(v){
            this.$store.commit('setList',v)
        }
    },
  },
  methods: {
  },
  mounted() {
    this.$refs.spic.style.height = this.$refs.spic.offsetWidth + "px";
  },
};
</script>

<style lang="scss" scoped>
.jdt {
  box-sizing: border-box;
  width: 100%;
  position: absolute;
  left: 0;
  bottom: 15%;
  padding: 20px;
  display: flex;
  align-content: center;
  span {
    margin: 0 10px;
    color: white;
  }
  .tiao {
    width: 80%;
    margin-top: 6px;
  }
}
.box {
  position: relative;
  height: 100vh;
  .box-mask {
    background: rgba(0, 0, 0, 0.3);
    width: 100%;
    height: 100%;
    position: absolute;
    z-index: -10;
  }
  .box-bg {
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: -100;
    filter: blur(10px);
    background-size: 200% !important;
  }
}
.box-top {
  color: #fff;
  padding-top: 10px;
  text-align: center;
  h3 {
    font-weight: normal;
    font-size: 16px;
  }
  .sname {
    color: #ccc;
    font-size: 12px;
    padding: 3px 0;
  }
}
@keyframes rotateAnimate {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}
.spic {
  width: 60%;
  border-radius: 50%;
  margin: auto;
  margin-top: 20%;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
  animation: rotateAnimate 20s linear infinite;
  img {
    width: 120%;
    height: 120%;
  }
}
.active {
  animation-play-state: running;
}
.paused {
  animation-play-state: paused;
}
.box-btm {
  position: absolute;
  bottom: 0;
  left: 0;
  display: flex;
  padding: 20px 40px;
  box-sizing: border-box;
  justify-content: space-between;
  width: 100%;
  align-items: center;
}
</style>